<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 
    https://blog.csdn.net/u010883578/article/details/133974535

    如果全局安装json-server报错，
    json-server,Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/json-server'
    而不全局安装(npm i json-server)又是正常，这样处理：
    执行：sudo chown -R $USER /usr/local/lib/node_modules
    提示输密码，输入回车
    再执行： npm i json-server -g
    成功后，执行 json-server --version
    显示：1.0.0-alpha.23

    json-server使用参考：https://blog.csdn.net/qq_60976312/article/details/126529541

 -->
    <div id="app">
        <button @click="handleClick">get请求</button>
        <ul>
            <li v-for="item in datalist">
                {{item.name}}-{{item.age}}
            </li>
        </ul>

        <p>
            <button @click="handleClick1">post请求1(json格式)</button>
        </p>
        <p>
            <button @click="handleClick2">post请求2(form格式)</button>
        </p>

        <p>
            <button @click="handleClick3">put请求(更新)</button>
        </p>
        <p>
            <button @click="handleClick4">delete请求(删除)</button>
        </p>
    </div>
    <script>
        var obj = {
            data() {
                return {
                    datalist: []
                }
            },
            methods: {
                handleClick() {
                    // get请求
                    fetch("http://localhost:3000/list").then((res) => {
                        // console.log(res);
                        return res.json(); //如果不能确定是json格式，就用text,return res.text()
                    }).then(res => {
                        console.log(res)
                        this.datalist = res
                    })



                },
                handleClick1() {
                    // post请求
                    fetch("http://localhost:3000/list", {
                        method: "POST", //post大小写都可以
                        body: JSON.stringify({
                            name: "zs",
                            age: 20
                        }),
                        headers: {
                            "Content-Type": "application/json"
                        }
                    }).then(res => {
                        return res.json()
                    }).then(res => {
                        console.log(res)
                    })
                },
                handleClick2() {
                    //post

                    fetch("http://localhost:3000/list", {
                        method: "post",
                        headers: {
                            "content-type": "application/x-www-form-urlencoded",
                        },
                        body: "name=xiaoming&age=19"
                    }).then(res => res.json()).then(res => {
                        console.log(res)
                    })


                },
                handleClick3() {
                    // post请求
                    fetch("http://localhost:3000/list/ab25", {
                        method: "PUT",
                        body: JSON.stringify({
                            name: "zs",
                            age: 23
                        }),
                        headers: {
                            "Content-Type": "application/json"
                        }
                    }).then(res => {
                        return res.json()
                    }).then(res => {
                        console.log(res)
                    })
                },
                handleClick4() {
                    // post请求
                    fetch("http://localhost:3000/list/27aa", {
                        method: "delete",
                    }).then(res => {
                        return res.json()
                    }).then(res => {
                        console.log(res)
                    })
                }

            }
        }

        Vue.createApp(obj).mount('#app')
    </script>
</body>

</html>